<!-- 音频播放 -->
<template>
  <div class="audioplayer">
    <h1 class="player-logo">
      <a href="#">
        <img
          src="https://y.gtimg.cn/mediastyle/yqq/img/player_logo.png"
          alt="QQ音乐"
          srcset="http://y.gtimg.cn/mediastyle/yqq/img/player_logo@2x.png 2x"
          class="player_logo__pic"
        />
      </a>
    </h1>
    <div class="mod-player-login"></div>
    <div class="mod-player">
      <div class="player-hd"></div>
      <div class="player-bd">
        <div class="player_style_normal js_box js_full_box">
          <div class="mod_songlist_toolbar">
            <a href="#" class="mod_btn js_all_like"
              ><i class="mod_btn_green__icon_like"></i>收藏</a
            >
            <a href="#" class="mod_btn js_all_fav"
              ><i class="mod_btn_green__icon_add"></i>添加到</a
            >
            <a href="#" class="mod_btn js_all_down"
              ><i class="mod_btn_green__icon_down"></i>下载</a
            >
            <a href="#" class="mod_btn js_all_delete"
              ><i class="mod_btn_green__icon_delete"></i>删除</a
            >
            <a href="#" class="mod_btn js_all_deleted"
              ><i class="mod_btn_green__icon_clear"></i>清空列表</a
            >
          </div>
          <div class="sb_viewport">
            <div class="sb_overview">
              <div class="mod_songlist">
                <i class="player_songlist__line"></i>
                <ul class="songlist__header">
                  <li class="songlist__edit">
                    <input type="checkbox" class="songlist__checkbox" />
                  </li>
                  <li class="songlist__header_name">歌曲</li>
                  <li class="songlist__header_author">歌手</li>
                  <li class="songlist__header_time">时长</li>
                </ul>
                <i class="player_songlist__line"></i>
                <ul class="songlist__list">
                  <li v-for="(item, index) in songsArr" :key="item.id">
                    <div class="songlist__item">
                      <div class="songlist__edit sprite">
                        <input type="checkbox" class="songlist__checkbox" />
                      </div>
                      <div class="songlist__number">{{ index + 1 }}</div>
                      <div class="songlist__songname">
                        <span class="songlist__songname_txt" @click.prevent.stop="sendComment(songsInfo.id)">{{
                          item.name
                        }}</span>
                        <div class="mod_list_menu"  >
                          <a

                            href="javascript:;"
                            class="list_menu__item list_menu__play js_play"
                            title="播放"
                          >
                            <i class="list_menu__icon_play"
                           @click="handleAudioPlay(item.id)"
                            ></i>
                          </a>
                          <a
                            href="javascript:;"
                            class="list_menu__add list_menu__item"
                            title="添加到歌单"
                          >
                            <i class="list_menu__icon_add"
                            @click="handleAddList(songsInfo)"
                            ></i>
                          </a>
                          <a
                            href="javascript:;"
                            class="list_menu__down list_menu__item"
                            title="VIP下载"
                          >
                            <i class="list_menu__icon_down"
                            
                            ></i>
                          </a>
                          <a
                            href="javascript:;"
                            class="list_menu__share list_menu__item"
                            title="分享"
                          >
                            <i class="list_menu__icon_share"></i>
                          </a>
                        </div>
                      </div>
                      <div class="songlist__artist">
                        <a href="#" class="singer_name">{{
                          item.artists[0].name
                        }}</a>
                      </div>
                      <div class="songlist__time">
                        {{ getSongTime(item.duration) }}
                      </div>
                      <div class="songlist__other"></div>
                      <a
                        href="#"
                        class="songlist__delete js_delete"
                        title="删除"
                        @click="deleteSong(index)"
                        ><span class="icon_txt">删除</span></a
                      >
                      <i class="player_songlist__line"></i>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="mod_song_info">
            <div class="song_info__info">
              <a href="#" class="song_info__cover js_album"
                ><img
                  :src="this.songsInfo.artists[0].img1v1Url"
                  alt=""
                  class="song_info__pic"
              /></a>
              <!--  -->
              <div class="song_info__name">
                歌曲名:<a href="#">{{ this.songsInfo.name }}</a>
              </div>
              <div class="song_info__singer">
                歌手名:<a href="#">{{ this.songsInfo.artists[0].name }}</a>
              </div>
              <div class="song_info__album">
                专辑名:<a href="#">{{ this.songsInfo.album.name }}</a>
              </div>
            </div>
            <div class="song_info__lyric">
              <div class="song_info__lyric_box js_lyric_box">
                <div class="song_info__lyric_inner qrc_ctn"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="player-ft">
        <audio
          :src="songUrl"
          controls="controls"
          loop="loop"
          autoplay="autoplay"
          @play="listenerSongPlaying"
          @pause="listenerSongPause"
          ref="audio"
        ></audio>
        <a href="#" class="btn_big_like js_btn_fav" title="喜欢[V]">
          <span class="icon_txt"></span>
        </a>
        <a href="#" class="btn_big_down js_btn_down" title="下载[D]">
          <span class="icon_txt"></span>
        </a>
        <a
          href="#"
          class="mod_btn_comment js_into_comment btn_comment99"
          title="评论[V]"
          
        >
          <span class="icon_txt"></span>
        </a>
        <a href="#" class="btn_big_only" title="打开纯净模式[C]">
          <span class="icon_txt"></span>
        </a>
      </div>
    </div>
    <div class="bg_player_mask"></div>
    <div class="bg-player"></div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import busline from "@/busline/busline";
// import { mapState } from 'vuex'

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data: function () {
    //这里存放数据
    return {
      songsInfo: {},
      songUrl: "",
      flag:false,//监听歌曲是否在播放,默认是false
      //歌曲去重
    // removeSameSong :function(){
    //   var arr=this.$store.state.songs;
    //   var obj={};
    //   arr.forEach((ele)=>{
    //     obj[ele]=true;
    //   })
    //    console.log(Object.keys(obj))
    //   return Object.keys(obj)
    // }
    songsArr:this.$store.state.songs,
    };
  },
  //计算属性 类似于data概念
  computed: {
    
  },
  //监控data中的数据变化
  watch: {
    // songsArr:function(){
     
    //  return this.removeSameSong();
    // }
  },
  //方法集合
  methods: {
    getSongTime(time) {
      let time2 = parseInt(time / 1000);
      let minutes = parseInt(time2 / 60);
      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      let seconds = time2 - minutes * 60;
      if (seconds < 10) {
        seconds = "0" + seconds;
      }
      return minutes + ":" + seconds;
    },
    //监听音频播放
    listenerSongPlaying() {
      this.flag=true;
      // this.$http
      //   .get("lyric", {
      //     params: {
      //       id: this.songsInfo.id,
      //     },
      //   })
      //   .then((res) => {
      //     // console.log(1);
      //     console.log(res);
      //   });
    },
    //监听音频停止
    listenerSongPause(){
      this.flag=false;
    },
    //handleAudioPlay 播放
    handleAudioPlay(songId){
      if(this.flag){
        //判断歌曲正在播放,点击即停止播放
        this.$refs.audio.pause();
      }else{
        this.$refs.audio.play();
      }
      this.$http.get('song/url',{
        params:{
          id:songId,
        }
      }).then((res)=>{
        this.songUrl=res.data.data[0].url;
      })
    },
    //添加到歌单
    handleAddList(songInfo){
      //busline.$emit("sendSongId",songInfo)
      this.$store.commit("getSONG",songInfo);
      this.$router.push("portal");
    },
    //发送评论
    sendComment(songId){
      busline.$emit('sendComment',songId)
      this.$router.push('songdail')
      // console.log(4);
      // console.log(songId);

    },
    //删除音乐
    deleteSong(index){
      this.songsArr.splice(index,1);
      this.songUrl='';
    },
    
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    busline.$on("getSongInfo", (songInfoArr) => {
      this.songsInfo = songInfoArr;
      // console.log(this.songsInfo);
    });
    busline.$on("getSongUrl", (songUrl) => {
      this.songUrl = songUrl;
      // console.log(this.songUrl);
    });
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
// * {
//   margin: 0;
//   padding: 0;
// }
a {
  text-decoration: none;
}
li {
  list-style: none;
}
img {
  border: none;
}
.audioplayer {
  width: 100vw;
  height: 100vh;
  background: rgb(42, 65, 78);
  min-width: 1100px;
  color: black;
  font-size: 14px;
  overflow: hidden;
  .player-logo {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 3;
    a {
      .player_logo__pic {
        width: 78px;
        height: 21px;
        opacity: 0.3;
        border: none;
      }
    }
  }

  .mod-player-login {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 9;
    text-align: right;
    padding-right: 28px;
  }

  .mod-player {
    color: rgba(255, 255, 255, 0.8);
    height: 100%;
    margin: 0 7.638889%;
    position: relative;
    z-index: 3;
    .player-hd {
    }

    .player-bd {
      position: absolute;
      top: 11%;
      bottom: 18%;
      width: 100%;
      min-height: 328px;
      cursor: default;
      .player_style_normal {
        margin-right: 440px;
        .mod_songlist_toolbar {
          margin-left: 1px;
          position: relative;
          margin-bottom: 20px;
          font-size: 0;
          .mod_btn {
            opacity: 0.8;
            border-color: rgba(255, 255, 255, 0.2);
            background-color: transparent;
            color: rgba(255, 255, 255, 0.5);
            min-width: 122px;
            text-align: center;
            border: 1px solid #c9c9c9;
            border-radius: 2px;
            font-size: 14px;
            margin-right: 6px;
            padding: 0 23px;
            height: 38px;
            line-height: 38px;
            display: inline-block;
            white-space: nowrap;
            box-sizing: border-box;
            overflow: hidden;
            i {
              opacity: 0.6;
            }
            .mod_btn_green__icon_like {
              width: 16px;
              height: 16px;
              background-image: url(/static/images/icon_sprite.png);
              background-position: -60px -20px;
              background-repeat: no-repeat;
              vertical-align: -4px;
              display: inline-block;
              margin-right: 6px;
            }
            .mod_btn_green__icon_add {
              width: 16px;
              height: 16px;
              background-image: url(/static/images/icon_sprite.png);
              background-position: -20px -20px;
              background-repeat: no-repeat;
              vertical-align: -3px;
              display: inline-block;
              margin-right: 6px;
            }
            .mod_btn_green__icon_down {
              width: 16px;
              height: 16px;
              background-image: url(/static/images/icon_sprite.png);
              background-position: -40px -240px;
              background-repeat: no-repeat;
              vertical-align: -3px;
              display: inline-block;
              margin-right: 6px;
            }
            .mod_btn_green__icon_delete {
              width: 16px;
              height: 16px;
              background-image: url(/static/images/icon_sprite.png);
              background-position: -100px -20px;
              background-repeat: no-repeat;
              vertical-align: -3px;
              display: inline-block;
              margin-right: 6px;
            }
            .mod_btn_green__icon_clear {
              width: 17px;
              height: 17px;
              background-image: url(/static/images/icon_sprite.png);
              background-position: -40px -300px;
              background-repeat: no-repeat;
              vertical-align: -3px;
              display: inline-block;
              margin-right: 6px;
            }
          }
          .mod_btn:hover {
            border-color: rgba(255, 255, 255, 1);
            color: rgba(255, 255, 255, 1);
          }
          .mod_btn:hover i {
            opacity: 1;
          }
        }
        .sb_viewport {
          overflow: hidden;
          position: relative;
          .sb_overview {
            height: 409px;
            margin-right: 0;
            overflow-x: hidden;
            overflow-y: auto;
            .mod_songlist {
              margin-right: 0;
              font-size: 14px;
              overflow: hidden;
              .player_songlist__line {
                display: block;
                width: 100%;
                height: 1px;
                background-color: #fff;
                opacity: 0.02;
              }
              .songlist__header {
                padding-left: 62px;
                background-color: transparent;
                color: inherit;
                height: 50px;
                line-height: 50px;
                position: relative;
                padding-right: 95px;
                .songlist__edit {
                  position: absolute;
                  left: 0;
                  top: 50%;
                  margin-top: -9px;
                  display: block;
                  width: 14px;
                  height: 14px;
                  line-height: 14px;
                  border: 1px solid #ccc;
                  input {
                    width: 14px;
                    height: 14px;
                    color: #000;
                    background-color: #fff;
                    font-size: 14px;
                  }
                }
                .songlist__header_name {
                  width: 68%;
                  float: left;
                  position: relative;
                  white-space: normal;
                }
                .songlist__header_author {
                  width: 26%;
                  color: inherit;
                  float: left;
                  padding-left: 15px;
                  box-sizing: border-box;
                }
                .songlist__header_time {
                  position: absolute;
                  top: 0;
                  right: 38px;
                  width: 50px;
                }
              }
              .songlist__list {
                overflow: hidden;
                clear: both;
                li {
                  .songlist__item {
                    padding-left: 62px;
                    clear: both;
                    font-size: 0;
                    overflow: hidden;
                    position: relative;
                    padding-right: 95px;
                    .songlist__edit {
                      position: absolute;
                      left: 0;
                      top: 50%;
                      margin-top: -9px;
                      width: 14px;
                      height: 14px;
                      line-height: 14px;
                      border: 1px solid #ccc;
                      background: url(/static/images/icon_sprite.png) no-repeat -1000px;
                      .songlist__checkbox {
                        width: 14px;
                        height: 14px;
                        opacity: 0;
                        color: #000;
                        background-color: #fff;
                        font-size: 14px;
                      }
                    }

                    .songlist__number {
                    }

                    .songlist__songname {
                      width: 68%;
                      float: left;
                      position: relative;
                      white-space: normal;
                      line-height: 50px;
                      height: 50px;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      .songlist__songname_txt {
                        max-width: 85%;
                        box-sizing: border-box;
                        float: left;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        margin-right: 8px;
                        white-space: nowrap;
                        font-size: 14px;
                        cursor: pointer;
                      }

                      .mod_list_menu {
                        visibility: hidden;
                        position: absolute;
                        right: -10px;
                        top: 7px;
                        overflow: hidden;
                        // opacity: 0;
                        height: 36px;
                        .list_menu__item {
                          display: inline-block;
                          margin-right: 10px;
                          vertical-align: top;
                          .list_menu__icon_play {
                            display: block;
                            width: 36px;
                            height: 36px;
                            background: url(/static/images/icon_list_menu.png)
                              no-repeat -80px 0;
                          }
                          .list_menu__icon_add {
                            display: block;
                            width: 36px;
                            height: 36px;
                            background: url(/static/images/icon_list_menu.png)
                              no-repeat -80px -80px;
                          }
                          .list_menu__icon_share {
                            display: block;
                            width: 36px;
                            height: 36px;
                            background: url(/static/images/icon_list_menu.png)
                              no-repeat -80px -40px;
                          }
                        }
                        .list_menu__down {
                          display: none;
                          .list_menu__icon_down {
                            display: block;
                            width: 36px;
                            height: 36px;
                            background: url(/static/images/icon_list_menu.png)
                              no-repeat -80px -280px;
                          }
                        }
                      }
                    }

                    .songlist__artist {
                      width: 26%;
                      color: inherit;
                      float: left;
                      padding-left: 15px;
                      box-sizing: border-box;
                      line-height: 50px;
                      height: 50px;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      font-size: 14px;
                      .singer_name {
                        color: rgba(225, 225, 225, 0.8);
                      }
                    }

                    .songlist__time {
                      position: absolute;
                      top: 0;
                      right: 38px;
                      width: 50px;
                      line-height: 50px;
                      height: 50px;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      font-size: 14px;
                      color: inherit;
                    }

                    .songlist__other {
                      position: absolute;
                      top: 0;
                      right: 0;
                      width: 38px;
                      overflow: inherit;
                      line-height: 50px;
                      height: 50px;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      font-size: 14px;
                    }

                    .songlist__delete.js_delete {
                      position: absolute;
                      top: 50%;
                      right: -99px;
                      margin-top: -18px;
                      width: 36px;
                      height: 36px;
                      color: rgba(225, 225, 225, 0.8);
                      background: url(/static/images/icon_list_menu.png)
                        no-repeat -80px -160px;
                      .icon_txt {
                      }
                    }

                    .player_songlist__line {
                      position: absolute;
                      left: 0;
                      bottom: 0;
                      display: block;
                      width: 100%;
                      height: 1px;
                      background-color: #fff;
                      opacity: 0.02;
                    }
                  }
                  .songlist__item:hover .mod_list_menu{
                    visibility: visible
                  }
                  .songlist__item:hover .songlist__delete {
                  // visibility: visible;
                  background-position: -120px -160px;
                  right: 56px;
                }
                .songlist__item:hover .songlist__time{
                  display: none;
                }
                }
                
              }
            }
          }
        }
        .mod_song_info {
          position: absolute;
          top: 0;
          right: 0;
          width: 340px;
          height: 100%;
          text-align: center;
          font-size: 14px;
          line-height: 24px;
          .song_info__info {
            .song_info__cover {
              position: relative;
              display: block;
              width: 186px;
              height: 186px;
              margin: auto;
              color: rgba(225, 225, 225, 0.8);
              .song_info__pic {
                vertical-align: middle;
                width: 186px;
                height: 186px;
              }
            }
            .song_info__name {
              white-space: nowrap;
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              height: 28px;
              margin-top: 15px;
              a {
                color: white;
              }
            }
            .song_info__singer {
              white-space: nowrap;
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              height: 28px;
              a {
                color: white;
              }
            }
            .song_info__album {
              white-space: nowrap;
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              height: 28px;
              a {
                color: white;
              }
            }
          }
          .song_info__lyric {
            position: absolute;
            top: 320px;
            bottom: 50px;
            left: 0;
            width: 100%;
            overflow: hidden;
            -webkit-mask-image: linear-gradient(
              to bottom,
              rgba(255, 255, 255, 0) 0,
              rgba(255, 255, 255, 0.6) 15%,
              rgba(255, 255, 255, 1) 25%,
              rgba(255, 255, 255, 1) 75%,
              rgba(255, 255, 255, 0.6) 85%,
              rgba(255, 255, 255, 0) 100%
            );
            .song_info__lyric_box {
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              overflow: hidden;
              cursor: -webkit-grab;
              margin-right: -30px;
              overflow-y: auto;
              .song_info__lyric_inner {
                margin-right: 30px;
                line-height: 34px;
                transition: -webkit-transform 0.1s ease-out 0s;
                transform: translateY(-643px);
              }
            }
          }
        }
      }
    }

    .player-ft {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 11%;
      audio{
        outline: none;
      }
      .btn_big_like {
        top: 4px;
        right: 330px;
        width: 23px;
        height: 21px;
        position: absolute;
        opacity: 0.8;
        background: url(/static/images/player.png) no-repeat 0 -96px;
        color: rgba(225, 225, 225, 0.8);
      }
      .btn_big_down {
        top: 4px;
        right: 286px;
        width: 22px;
        height: 21px;
        position: absolute;
        opacity: 0.8;
        background: url(/static/images/player.png) no-repeat 0 -120px;
        color: rgba(225, 225, 225, 0.8);
      }
      .mod_btn_comment {
        top: 3px;
        right: 237px;
        width: 24px;
        height: 24px;
        position: absolute;
        opacity: 0.8;
        background: url(/static/images/player.png) no-repeat 0 -430px;
        color: rgba(225, 225, 225, 0.8);
      }
      .btn_big_only {
        top: 3px;
        right: 137px;
        width: 74px;
        height: 26px;
        position: absolute;
        opacity: 0.8;
        background: url(/static/images/player.png) no-repeat 0 -282px;
        color: rgba(225, 225, 225, 0.8);
      }
    }
  }

  .bg_player_mask {
  }

  .bg-player {
  }
}
</style>